<template>
  <div class="alarm">
    <el-table :data="tableData" style="width: 100%" height="100%">
      <el-table-column prop="platform" label="平台" min-width="10%">
      </el-table-column>
      <el-table-column prop="device" label="设备" min-width="10%">
      </el-table-column>
      <el-table-column prop="health_score" label="当前健康度" min-width="10%">
      </el-table-column>
      <el-table-column prop="threshold" label="预警阈值" min-width="10%">
      </el-table-column>
      <el-table-column prop="time" label="告警时间" min-width="10%">
      </el-table-column>
    </el-table>
    <i class="el-icon-download" @click="dataExport"></i>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [], // 服务端获取数据
      timerId: null,
    };
  },
  mounted() {
    this.getData();
  },
  destroyed() {
    clearInterval(this.timerId);
  },
  methods: {
    dataExport() {
      this.$msg({
        message: "导出数据成功",
        type: "success",
      });
    },
    async getData() {
      const { data: ret } = await this.$axios.get("/alarm_data");
      // console.log(ret.data);
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        if (ret.data.length == 0) {
          clearInterval(this.timerId);
        } else {
          this.tableData.unshift(ret.data[0]);
          ret.data.shift();
        }
      }, 3000);
    },
  },
};
</script>

<style scoped>
.alarm {
  position: relative;
  width: 100%;
  height: 100%;
}
.alarm i {
  position: absolute;
  top: 4%;
  right: 1%;
  font-size: 20px;
  color: #a5a5a5;
}
.alarm i:hover {
  color: #83bdd9;
}
.el-table {
  height: 100%;
  font-size: 8px;
  /* overflow: scroll; */
}
/* 不起作用 */
.el-table td {
  padding: 0;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}

/*  */
</style>